<template>
  <view class="user">
    <view class="user-bgim">
    </view>
    <view class="user-content">
      <!-- 爱吃草莓 -->
      <view class="user1">
        <view class="user1-top">
          <view class="user1-top-left" @click="goPhoto">
            <image :src="url" mode="widthFix" class="user1-top-left1"></image>
            <view class="user1-top-left2">
              <h3>爱吃草莓蛋糕的懒洋洋</h3>
              <p>普通用户</p>
            </view>
          </view>
          <view class="user1-top-right">
            <image src="../../static/image/xiao_xi.png" mode="widthFix"></image>
          </view>
        </view>
        <!-- 2 -->
        <view class="user1-middle">
          <p class="user1-middle-p1"><text>会员中心</text><span>|&nbsp;首次开会员，领取66元专享红包!</span></p>
          <p class="user1-middle-p2">立即开通</p>
        </view>
        <!-- 3 -->
        <view class="user1-bottom">
          <view class="user1-bottom1">
            <p><span>￥</span>0</p>
            <p>余额</p>
          </view>
          <view class="user1-bottom1">
            <p>3</p>
            <p>优惠卷</p>
          </view>
          <view class="user1-bottom1">
            <p>0</p>
            <p>金额</p>
          </view>
          <view class="user1-bottom1">
            <p><span>￥</span>4</p>
            <p>收益</p>
          </view>
        </view>
      </view>
    </view>
    <!-- 我的订单 -->
    <view class="orders">
      <view class="orders-top">
        <view class="color">我的订单</view>
        <view class="color1">全部订单 ></view>
      </view>
      <u-grid :col="5">
        <u-grid-item>
          <image src="../../static/image/待支付.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">待支付</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/待配送.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">待配送</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/配送中.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">配送中</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/待评价.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">待评价</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/售后.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">售后</view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 我的服务 -->
    <view class="serve">
      <view class="serve-top">
        <view class="color">我的服务</view>
      </view>
      <u-grid :col="4">
        <u-grid-item>
          <image src="../../static/image/积分商城.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">积分商城</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/商品收藏.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">商品收藏</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/推荐有礼.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">推荐有礼</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/助力免费拿.png" style="width: 30px; height: 30px;" mode=""></image>
          <view class="grid-text">助力免费拿</view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 安全中心 -->
    <view class="safety">
    	<view class="safety-top">
    		<p class="safety-top-p1">安全中心</p>
    		<!-- <p class="mine2-top-p2">全部订单&nbsp;></p> -->
    	</view>
    	<!-- 1 -->
    	<view class="safety-content">
    		<view class="safety-content1">
    			<image src="../../static/image/客服.png" mode="widthFix"></image>
    			<p>客服与帮助</p>
    		</view>
    		<span>></span>
    	</view>
    	<!-- 2 -->
    	<view class="safety-content">
    		<view class="safety-content1">
    			<image src="../../static/image/定位.png" mode="widthFix"></image>
    			<p>收货地址</p>
    		</view>
    		<span>></span>
    	</view>
    	<!-- 3 -->
    	<view class="safety-content">
    		<view class="safety-content1">
    			<image src="../../static/image/设置.png" mode="widthFix"></image>
    			<p>设置</p>
    		</view>
    		<span>></span>
    	</view>
    </view>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        url: '../../static/image/猫咪.png'
      }
    },
    methods: {
      goPhoto() {
        let t = this;
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            t.url = res.tempFilePaths[0]
            console.log(JSON.stringify(res.tempFilePaths));
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .user {
    width: 100%;
    background-color: #f5f5f5;

    // nav
    .user-bgim {
      width: 100%;
      height: 100rpx;
      background-image: linear-gradient(to bottom, #C8F0DA, #F2FBF6);
    }

    // 头像选择
    .user-content {
      background-image: linear-gradient(to bottom, #F2FBF6, #f5f5f5);
      padding-bottom: 30rpx;

      .user1 {
        width: 94%;
        margin: 0 auto;
        border-radius: 18rpx;
        // border: 1px solid ;
        background-color: white;
        padding-top: 40rpx;
        padding-bottom: 10rpx;
        margin-bottom: 30rpx;

        .user1-top {
          // margin-top: 40rpx;
          padding-left: 40rpx;
          padding-right: 40rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .user1-top-left {
            display: flex;

            // border: 1px solid;
            .user1-top-left1 {
              width: 110rpx;
              margin-right: 20rpx;
            }

            .user1-top-left2 {
              p {
                margin-top: 10rpx;
                // border: 1px solid;
                width: 120rpx;
                border-radius: 10rpx;
                font-size: 22rpx;
                text-align: center;
                background-color: #46BC74;
                height: 44rpx;
                line-height: 44rpx;
                color: white;
              }
            }
          }

          .user1-top-right {
            width: 50rpx;

            image {
              width: 100%;
            }
          }
        }

        .user1-middle {
          width: 94%;
          margin: 0 auto;
          margin-top: 60rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          background-image: linear-gradient(to right, #46BC74, #C8F0DA);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .user1-middle-p1 {
            color: white;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            letter-spacing: 2rpx;

            // background-color: white;
            text {
              font-size: 28rpx;
              display: block;
              margin-right: 12rpx;
            }
          }

          .user1-middle-p2 {
            // border: 1px solid;
            font-size: 22rpx;
            width: 130rpx;
            text-align: center;
            border-radius: 20rpx;
            color: #46BC74;
            height: 40rpx;
            line-height: 40rpx;
            background-color: white;
          }
        }

        // 3
        .user1-bottom {
          // background-color: white;
          text-align: center;
          width: 86%;
          margin: 0 auto;
          margin-top: 30rpx;
          margin-bottom: 30rpx;
          // border: 1px solid;
          display: flex;
          justify-content: space-between;

          p:nth-child(1) {
            color: green;
            font-size: 38rpx;

            // font-weight:bold;
            span {
              font-size: 22rpx;
            }
          }

          p:nth-child(2) {
            font-size: 26rpx;
            font-weight: bold;
          }
        }
      }
    }

    // 我的订单
    .orders {
      width: 94%;
      margin: auto;
      margin-top: -30rpx;
      background-color: #ffffff;
      border-radius: 15rpx;

      .orders-top {
        padding-top: 10rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        display: flex;
        justify-content: space-between;

        .color {
          font-weight: bold;
          font-size: 20px;

        }
      }
    }

    // 我的服务
    .serve {
      width: 94%;
      margin: auto;
      margin-top: 15rpx;
      background-color: #ffffff;
      border-radius: 15rpx;

      .serve-top {
        padding-top: 10rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        display: flex;
        justify-content: space-between;

        .color {
          font-weight: bold;
          font-size: 20px;

        }
      }
    }
    // 安全中心
    .safety{
    	background-color: white;
    	width: 94%;
    	margin: auto;
      margin-top: 15rpx;
    	border-radius: 18rpx;
    	padding-top: 20rpx;
    	padding-bottom: 20rpx;
    	// margin-bottom: 30rpx;
    	.safety-top{
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    		padding-left: 30rpx;
    		padding-right: 30rpx;
    		.safety-top-p1{
    			font-weight: bold;
    		}
    	}
    	// content
    	.safety-content{
    		width: 90%;
    		margin: 0 auto;
    		margin-top: 30rpx;
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    		.safety-content1{
    			display: flex;
    			align-items: center;
    			image{
    				width: 40rpx;
    			}
    			p{
    				font-size: 24rpx;
    				font-weight: bold;
    				margin-left: 30rpx;
    			}
    		}
    		span{
    			color: #ccc;
    		}
    	}
    }
  }
</style>